import styled from 'styled-components';
import React, { useState } from 'react';

import { ImageBox } from './image-box';

export interface ImageListProps {
    images: Array<{ url: string }>;
    size?: number;
}

export const ImageList: React.FC<ImageListProps> = (props) => {

    return (
        <Container>
            {
                props.images && props.images.map((image, index) => {
                    return (
                        <ImageBox key={index} url={image.url} width={props.size} height={props.size}></ImageBox>
                    );
                })
            }
        </Container>
    );
}

const Container = styled.div`
    height: 100%;
    width: 100%;
    display: flex;
    gap: 4px;
`;